<template>
  <div class="ma-content-block lg:flex justify-between p-4">
    <!-- CRUD 组件 -->
    <ma-crud :options="options" :columns="columns" ref="crudRef">
      <template #point_image="{ record }">
        <a-link @click="onClick(record)">
          <template #icon>
            <icon-image />
          </template>
          查看图片
        </a-link>
        <div v-if="imageList">
          <a-image-preview-group infinite v-model:visible="visible" :srcList="imageList">
          </a-image-preview-group>
        </div>
      </template>
      <template #dept_id="{ record }">
        <a-link href="#" status="warning">{{ record.dept_id }}</a-link>
      </template>
      <template #operationBeforeExtend="{ record }">

        <a-link @click="enterPoint(record)">
          <template #icon>
            <icon-to-right />
          </template>
          进入点位
        </a-link>
        <a-link @click="buserManager(record)">
          <template #icon>
            <icon-user-group />
          </template>
          负责人管理
        </a-link>

      </template>
    </ma-crud>
    <user-home ref="userHomeRef" />
    <a-modal v-model:visible="point_visible" @ok="handleOk" @cancel="handleCancel" fullscreen v-if="pointInfo">
      <template #title>
        {{ pointInfo.point_name }}
      </template>
      <a-space direction="vertical" :size="16" style="display: block;">
            <a-row class="grid-demo" :gutter="20" :style="{ marginBottom: '20px' }">
                <a-col :span="9">
                    <div>
                        <a-card :style="{ width: '100%' ,height:'240px'}" title="点位基本信息" hoverable>
                            <template #extra>
                                <a-link status="warning" @click="openFeeManage(pointInfo)">

                                    <template #icon>
                                        <icon-alipay-circle />
                                    </template>
                                    负责人管理
                                </a-link>
                            </template>
                            <div class="pro_info">
                                <a-space direction="vertical" size="large" fill>
                                    <a-descriptions title="" :column="2">
                                        <!-- <a-descriptions-item v-for="item of producttions" :label="item.label"
                                            :span="item.span ?? 1">
                                            <a-tag>{{ item.value }}</a-tag>
                                        </a-descriptions-item> -->
                                        <a-descriptions-item label="点位名称" :span="1">
                                            <a-tag color="red">{{ pointInfo.point_name }}</a-tag>

                                        </a-descriptions-item>
                                        <a-descriptions-item label="点位编号" :span="1">
                                            <a-tag>{{ pointInfo.point_num }}</a-tag>

                                        </a-descriptions-item>
                                        <a-descriptions-item label="点位坐标" :span="1">
                                            <a-tag>{{ pointInfo.point_lat_lon }}</a-tag>

                                        </a-descriptions-item>
                                        <a-descriptions-item label="点位地址" :span="1">
                                            <a-tag color="orange">{{ pointInfo.point_address }}</a-tag>

                                        </a-descriptions-item>
                                        <a-descriptions-item label="点位照片" :span="1">
                                           
                                            <a-image  width="40"
                                            :src="pointInfo.point_image ? $tool.showFile( pointInfo.point_image) : 'some-error.png'" />
                                        </a-descriptions-item>
                                        <a-descriptions-item label="创建时间" :span="1">
                                            <a-tag>{{ pointInfo.created_at }}</a-tag>

                                        </a-descriptions-item>
                                        <a-descriptions-item label="点位描述" :span="1">
                                            <a-typography-paragraph style="font-size:12px;;margin-top:10px;" :ellipsis="{
                                                          rows: 2,
                                                         showTooltip: true,
                                                }">
                                              {{ pointInfo.point_desc }}
                                            </a-typography-paragraph>
                                        </a-descriptions-item>
                                    </a-descriptions>
                                </a-space>
                            </div>
                        </a-card>
                    </div>
                </a-col>
                <a-col :span="9">
                    <div>
                        <a-card :style="{ width: '100%'}" title="点位统计" hoverable :bordered="true">
                            <template #extra>
                                <a-link>更多</a-link>
                            </template>
                            <st-count :proid="pointInfo.id" v-if="point_visible"></st-count>
                        </a-card>
                    </div>
                </a-col>
                <a-col :span="6">
                    <div>
                      <a-card :style="{ width: '100%'}" title="点位位置" hoverable :bordered="true">
                           <ma-map></ma-map>
                        </a-card>
                     
                    </div>
                </a-col>
            </a-row>

            <a-row class="grid-demo" :gutter="20" :style="{ marginBottom: '20px' }">
              
                <a-col :span="24">

                  <device-list :pid="pointInfo.id" ></device-list>
                </a-col>
            </a-row>
        </a-space>
    

    </a-modal>
  </div>
</template>
<script setup>
import endIcon from '../../../assets/end.png'
import { ref, reactive ,shallowRef,onMounted} from 'vue'
import { addTag } from '@/utils/common'
import { useRoute } from 'vue-router'
import systemPoint from '@/api/system/systemPoint'
import userHome from '@/views/system/user/home.vue'
import deviceList from '@/views/system/device/index.vue'
import { Message } from '@arco-design/web-vue'
import tool from '@/utils/tool'
import * as common from '@/utils/common'
import { useAppStore, useUserStore } from '@/store'
import stCount from './st-count.vue'
import maMap from '@/views/components/ma-map/index.vue'
const userStore = useUserStore()
const route = useRoute()
const deptId = ref()
const userHomeRef = ref()
const point_visible = ref(false)
const pointInfo = ref()
const address = ref(""); //地址
const point = ref({}); //坐标
const lng_lat = ref({}); //坐标
if (userStore.depts) {
  deptId.value = userStore.depts[0].id
}

console.log(deptId.value)
const crudRef = ref()
const visible = ref(false)
const imageList = ref()
const onClick = (record) => {
  imageList.value = [];
  if (record.point_image ) {
    visible.value = true;
    // imageList.value = tool.showFile(item)
    // record.point_image.forEach(function (item) {
      imageList.value.push(tool.showFile(record.point_image))
    // })
  } else {
    Message.error("暂无图片")
  }
};
//点位负责人管理

const buserManager = (row) => {
  userHomeRef.value.open(row)
}

//打开负责人管理列表
const openFeeManage = (row)=>{
  userHomeRef.value.open(row)

}

const enterPoint = (record) => {
  point_visible.value = true;
  console.log(record)
  pointInfo.value = record
};
const handleOk = () => {
  point_visible.value = false;
  pointInfo.value = null
};
const handleCancel = () => {
  point_visible.value = false;
  pointInfo.value = null
}
// const enterPoint = () =>{
// console.log(route)
// // 页面tag栏，新增一个tag
// addTag({ name: route.name, path: route.path, title: route.meta.title, query: route.query })

// }
const numberOperation = (newValue, id, numberName) => {
  systemPoint.numberOperation({ id, numberName, numberValue: newValue }).then(res => {
    res.success && Message.success(res.message)
  }).catch(e => { console.log(e) })
}

const switchStatus = (statusValue, id, statusName) => {
  systemPoint.changeStatus({ id, statusName, statusValue }).then(res => {
    res.success && Message.success(res.message)
  }).catch(e => { console.log(e) })
}


const options = reactive({

  beforeRequest: params => {
    // 指定排序字段为浏览量字段
    params.dept_id = deptId.value
    // 指定降序排序
    params.orderType = 'desc'

    // 指定排序字段为浏览量字段
    params.orderBy = 'id'
  },

  id: 'system_point',
  rowSelection: {
    showCheckedAll: true
  },
  pk: 'id',
  operationColumn: true,
  operationWidth: 160,
  formOption: {
    viewType: 'modal',
    width: 600
  },
  api: systemPoint.getList,
  recycleApi: systemPoint.getRecycleList,
  add: {
    show: true,
    api: systemPoint.save,
    auth: ['system:point:save']
  },
  edit: {
    show: true,
    api: systemPoint.update,
    auth: ['system:point:update']
  },
  delete: {
    show: true,
    api: systemPoint.deletes,
    auth: ['system:point:delete'],
    realApi: systemPoint.realDeletes,
    realAuth: ['system:point:realDeletes']
  },
  recovery: {
    show: true,
    api: systemPoint.recoverys,
    auth: ['system:point:recovery']
  },
  import: {
    show: true,
    url: 'system/point/import',
    templateUrl: 'system/point/downloadTemplate',
    auth: ['system:point:import']
  },
  export: {
    show: true,
    url: 'system/point/export',
    auth: ['system:point:export']
  }
})

const columns = reactive([
  {
    title: "",
    dataIndex: "id",
    formType: "input",
    addDisplay: false,
    editDisplay: false,
    hide: true,
    commonRules: {
      required: true,
      message: "请输入"
    }
  },
  {
    title: "点位编号",
    dataIndex: "point_num",
    formType: "input",
    search: true,
    commonRules: [{ required: true, message: '请填写点位编号' }]
  },
  {
    title: "点位名称",
    dataIndex: "point_name",
    formType: "input",
    search: true,
    commonRules: [{ required: true, message: '请填写点位名称' }]
  },
  {
    title: '',
    dataIndex: '',
    formType: 'component',
    component: shallowRef(maMap),
    hide: true
  },
  {
    title: "点位位置",
    dataIndex: "point_address",
    formType: "input"
  },
  {
    title: "点位坐标",
    dataIndex: "point_lat_lon",
    formType: "input"
  },
  {
    title: "点位照片",
    dataIndex: "point_image",
    formType: "upload"
  },
  {
    title: "点位描述",
    dataIndex: "point_desc",
    formType: "textarea"
  },

  {
    title: "所属区域",
    dataIndex: "dept.name",
    formType: "input",
    addDisplay: false,
    editDisplay: false,
    addDefaultValue: deptId.value,
    editDefaultValue: deptId.value,
    hide: false
  },
  // {
  //     title: '所属区域', dataIndex: 'dept_id', hide: true, formType: 'tree-select',
  //     multiple: false, treeCheckable: false, treeCheckStrictly: false,
  //     dict: { url: 'system/common/getDeptTreeList' }, commonRules: [{ required: true, message: '所属区域必选' }],
  // editDefaultValue: async (record) => {
  //   const response = await user.read(record.id)
  //   return response.data.deptList.map(item => item.id )
  // }
  // },
  {
    title: "创建者",
    dataIndex: "created_by",
    formType: "input",
    addDisplay: false,
    editDisplay: false,
    hide: true
  },
  {
    title: "更新者",
    dataIndex: "updated_by",
    formType: "input",
    addDisplay: false,
    editDisplay: false,
    hide: true
  },
  {
    title: "创建时间",
    dataIndex: "created_at",
    formType: "date",
    addDisplay: false,
    editDisplay: false,
    hide: false,
    showTime: true,
    search: true,
  },
  {
    title: "更新时间",
    dataIndex: "updated_at",
    formType: "date",
    addDisplay: false,
    editDisplay: false,
    hide: true,
    showTime: true
  },
  {
    title: "删除时间",
    dataIndex: "deleted_at",
    formType: "date",
    addDisplay: false,
    editDisplay: false,
    hide: true,
    showTime: true
  }
])
</script>
<script>export default { name: 'system:point' } </script>